<template>
  <div>
    <div class="tableDiv">
      <div class="rowDiv">
        <div class="keyDiv">楼宇名称</div>
        <div class="valueDiv">{{ detail.buildingName }}</div>
        <div class="keyDiv">楼宇类型</div>
        <div class="valueDiv">
          {{ $selectDict(Type, detail.buildingType).dictLabel }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">楼宇级别</div>
        <div class="valueDiv">
          {{ $selectDict(Leave, detail.buildingLeave).dictLabel }}
        </div>
        <div class="keyDiv">楼宇所在街道</div>
        <div class="valueDiv">
          {{ $selectDict(Street, detail.streetCode).dictLabel }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">详细位置</div>
        <div class="valueDiv">{{ detail.address }}</div>
        <div class="keyDiv">装修情况</div>
        <div class="valueDiv">
          {{ $selectDict(decoration, detail.buildingDecorationType).dictLabel }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">楼层</div>
        <!-- <div class="valueDiv" style="width: 100%">
          {{ $selectDict(Num, detail.floorType).dictLabel }}
          地上 {{ detail.aboveGroundFloors }} 层 地下
          {{ detail.undergroundFloors }} 层 楼高 {{ detail.buildingHeight }} 米
        </div> -->
        <div v-if="detail.floorType == 1 && detail.floorType" class="valueDiv" style="width: 100%">
          <span class="firstSpan">单层</span>{{detail.buildingFloor}}<span>层</span>
        </div>
        <div v-if="detail.floorType == 2 && detail.floorType" class="valueDiv" style="width: 100%">
          <span class="firstSpan">独栋</span><span>地上</span>{{detail.aboveGroundFloors}}<span>层</span><span>地下</span>{{detail.undergroundFloors}}<span>层</span><span>楼高</span>{{detail.buildingHeight}}<span>米</span>
        </div>
        <div v-if="detail.floorType == 3 && detail.floorType" class="valueDiv" style="width: 100%">
          <span class="firstSpan">多层</span><span>地上</span>{{detail.aboveGroundFloors}}<span>层</span><span>地下</span>{{detail.undergroundFloors}}<span>层</span><span>楼高</span>{{detail.buildingHeight}}<span>米</span>
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">出租面积</div>
        <div class="valueDiv">{{ detail.rentalArea }} ㎡</div>
        <div class="keyDiv" v-if="detail.rentMode == 1 || detail.rentMode == 2">租金</div>
        <div class="valueDiv" v-if="detail.rentMode == 1 || detail.rentMode == 2">
          <span class="firstSpan" v-if="detail.rentMode == 1">价格</span><span :class="detail.rentMode == 2 ? 'firstSpan' : ''">{{detail.rentMode==1?detail.rentPrice + '  '+ (detail.rentUnitMeasure == 1 ? '元/月' : '元/㎡/天'):(detail.rentMode==2?'面议':'')}}</span>
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv" v-if="detail.rentTermMinimum">起租期</div>
        <div class="valueDiv" v-if="detail.rentTermMinimum">{{ detail.rentTermMinimum }} 月</div>
        <div class="keyDiv" v-if="(detail.recommendedStationMinimum && detail.recommendedStationMaximum) || detail.recommendedStationMaximum">推荐工位数量</div>
        <div class="valueDiv" v-if="(detail.recommendedStationMinimum && detail.recommendedStationMaximum) || detail.recommendedStationMaximum">
          {{ detail.recommendedStationMinimum }}~{{
            detail.recommendedStationMaximum
          }}
        </div>
      </div>
      <div class="rowDiv" v-if="detail.sellMode == 1">
        <div class="keyDiv">出售价格</div>
        <div class="valueDiv" style="width: 100%">
          {{ detail.sellingPrice }}<span>元/㎡</span>
        </div>
      </div>
      <div class="rowDiv" v-if="detail.sellMode == 2">
        <div class="keyDiv">出售价格</div>
        <div class="valueDiv" style="width: 100%">
          面议
        </div>
      </div>
      <div class="rowDiv" v-if="detail.sellMode == 3">
        <div class="keyDiv">出售价格</div>
        <div class="valueDiv" style="width: 100%">
          不售
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">楼宇介绍</div>
        <div class="valueDiv" style="width: 100%">
          {{ detail.buildingIntroduce }}
        </div>
      </div>
      <div class="rowDiv" v-if="detail.restaurantNum || detail.busStation || detail.apartments || detail.subwayStation || detail.hospital || detail.airport || detail.highSpeedRail || detail.businessDistrict">
        <div class="keyDiv">周边配套</div>
        <div class="valueDiv" style="width: 100%">
          <span class="firstSpan" v-if="detail.restaurantNum">餐厅&nbsp;&nbsp; {{ detail.restaurantNum }} &nbsp;&nbsp;家</span> 
          <span class="firstSpan" v-if="detail.busStation">公交站&nbsp;&nbsp; {{ detail.busStation }} &nbsp;&nbsp;</span> 
          <span class="firstSpan" v-if="detail.apartments">公寓&nbsp;&nbsp; {{ detail.apartments }} &nbsp;&nbsp;所</span> 
          <span class="firstSpan" v-if="detail.subwayStation">地铁站&nbsp;&nbsp; {{ detail.subwayStation }} </span> 
          <span class="firstSpan" v-if="detail.hospital">医院&nbsp;&nbsp; {{detail.hospital}} </span> 
          <span class="firstSpan" v-if="detail.airport">机场&nbsp;&nbsp; {{detail.airport}}</span> 
          <span class="firstSpan" v-if="detail.highSpeedRail">高铁&nbsp;&nbsp; {{ detail.highSpeedRail }} </span> 
          <span class="firstSpan" v-if="detail.businessDistrict">商圈&nbsp;&nbsp; {{ getBusinessDistrict(Number(detail.businessDistrict)) }}</span> 
        </div>
      </div>
      <div class="rowDiv" v-if="detail.settledEnterpriseInformation">
        <div class="keyDiv">入驻企业信息</div>
        <div class="valueDiv" style="width: 100%">
          {{ detail.settledEnterpriseInformation }}
        </div>
      </div>
      <div class="rowDiv" v-if="detail.highTechEnterprisesNum || detail.listedEnterprisesNum || detail.biomedicalEnterpriseNum">
        <div class="keyDiv">企业数据</div>
        <div class="valueDiv" style="width: 100%">
          <span class="firstSpan" v-if="detail.highTechEnterprisesNum">高新企业&nbsp;&nbsp; {{ detail.highTechEnterprisesNum }} &nbsp;&nbsp;家 </span>
          <span class="firstSpan" v-if="detail.listedEnterprisesNum">上市企业&nbsp;&nbsp; {{ detail.listedEnterprisesNum }} &nbsp;&nbsp;家 </span>
          <span class="firstSpan" v-if="detail.biomedicalEnterpriseNum">生物医药企业&nbsp;&nbsp; {{ detail.biomedicalEnterpriseNum }} &nbsp;&nbsp;家 </span>
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">楼宇物业公司</div>
        <div class="valueDiv" style="width: 100%">
          {{ detail.propertyCompany }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">
          <div>物业公司</div>
          <div>服务介绍</div>
        </div>
        <div class="valueDiv" style="width: 100%">
          {{ detail.propertyCompanyIntroduce }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">物业费</div>
        <div class="valueDiv" style="width: 100%" v-if="detail.propertyFee || detail.propertyPriceUnit">{{ detail.propertyFee }} {{getBuildingPropertyPriceUnit(Number(detail.propertyPriceUnit)).dictLabel}}</div>
        <div class="valueDiv" style="width: 100%" v-else> - </div>
      </div>
      <div class="rowDiv" v-if="detail.hydropowerPrice">
        <div class="keyDiv">水电价格</div>
        <div class="valueDiv" style="width: 100%" v-if="detail.hydropowerPrice">{{ detail.hydropowerPrice }}</div>
      </div>
      <div class="rowDiv" v-if="detail.buildingVideo">
        <div class="keyDiv">相关视频</div>
        <div class="valueDiv" style="width: 100%">
          <video
            v-if="detail.buildingVideo"
            :src="detail.buildingVideo"
            controls="controls"
            controlsList="nodownload"
          ></video>
        </div>
        <div class="keyDiv" v-if="detail.videoCover">视频封面</div>
        <div class="valueDiv" style="width: 100%">
          <img v-if="detail.videoCover" v-lazy="detail.videoCover" alt="" />
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">楼宇图片</div>

        <div
          class="valueDiv"
          style="width: 88%; display: flex; flex-wrap: wrap"
        >
          <img
            v-lazy="item"
            alt=""
            v-for="(item, index) in detail.imgs"
            :key="index"
          />
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">联系人</div>
        <div class="valueDiv">{{ detail.contactsPerson }}</div>
        <div class="keyDiv">联系方式</div>
        <div class="valueDiv">{{ detail.contactsPhone }}</div>
      </div>
    </div>
    <Buttons :buttons="buttons" @goBack="goBack" @toBuilding="toBuilding" class="btns"></Buttons>
  </div>
</template>

<script>
import { getBuildingInfo } from '@/common/api/company.js'
export default {
  computed:{
    buttons(){
      let btns = [{ text: "返回", type: "normal", size: "l", method: "goBack" }];
      if(this.detail.state != 1){
        btns.push({ text: "编辑楼宇", type: "success", size: "l", method: "toBuilding" })
      }
      return btns
    }
  },
  data() {
    //这里存放数据
    return {
      buildingPropertyPriceUnit:[], // 物业价格单位
      buildingBusinessDistrict:[], // 附近商圈
      id: "",
      Type: [],
      Leave: [],
      decoration: [],
      Num: [],
      detail: {},
      Street: [],
    };
  },
  methods: {
    goBack(){
      this.$router.replace({name: "myBuilding"})
    },
    getBuildingPropertyPriceUnit(sellPriceUnit){ //获得物业价格单位
      const res = this.buildingPropertyPriceUnit.find(item => {
        return item.dictValue == sellPriceUnit
      })
      return res
    },
    getBusinessDistrict(businessDistrict){ // 获得附近商圈
      const res = this.buildingBusinessDistrict.find(item => {
        return item.dictValue == businessDistrict
      })
      return res.dictLabel
    },
    toBuilding() {
      this.$router.push({ name: "releaseBuilding", query: { id: this.id } });
    },
    async getMessage() {
      let res = await getBuildingInfo(this.id)
      if (res.code == 200) {
        this.detail = res.data;
        // this.detail.buildingVideo = "https://www.w3school.com.cn/i/movie.ogg";
        // console.log(this.detail);
        let imgs = this.detail.buildingImages
        if (imgs) {
          let len = imgs.charAt(imgs.length-1)
          if(len == ',') {
            imgs = imgs.substring(0,imgs.length-1)
          }
          // console.log('len', len, imgs)
          this.detail.imgs = imgs.split(",");
        } else {
          this.detail.imgs = [];
        }
      }
    },
    // 获取字典
    async getDict() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`building_floor_type,building_type,building_leave,building_decoration_type,street_code,building_property_price_unit,rent_unit_measure,building_sell_mode,building_business_district`).then(res => {
        this.Num = res.building_floor_type;
        this.Leave = res.building_leave;
        this.decoration = res.building_decoration_type;
        this.Type = res.building_type;
        this.Street = res.street_code;
        this.rentUnitMeasure = res.rent_unit_measure;
        this.buildingBusinessDistrict = res.building_business_district;
        this.buildingPropertyPriceUnit = res.building_property_price_unit;
      })
    },
  },
  mounted() {
    this.getDict();
    this.id = this.$route.query.id;
    this.getMessage();
  }
};
</script>



<style scoped>
.valueDiv >span{
  margin: 0px 10px;
}
.firstSpan{
  margin: 0px 10px 0px 0px !important;
}
.tableDiv {
  font-size: 15px;
  border: 1px solid #eeeeee;
  color: #666666;
  margin-bottom: 29px;
}
.btns{
  margin-top: 40px;
}

.contactBuilding {
  width: 119px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  border-radius: 3px;
  margin-bottom: 121px;
  cursor: pointer;
  background: #f1f2f4;
  color: #045db9;
}
.btn {
  width: 119px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
  background: #045db9;
  /* margin: 0 auto; */
  margin-left: 20px;
  border-radius: 3px;
  margin-bottom: 121px;
  cursor: pointer;
}
.tableDiv .rowDiv {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
}

.tableDiv .rowDiv:last-of-type {
  border-bottom: none;
}

.tableDiv .rowDiv .keyDiv {
  flex-shrink: 0;
  padding: 10px;
  background-color: #f4f4f4;
  width: 110px;
  color: #333;
  font-size: 14px;
  text-align: right;
}

.tableDiv .rowDiv .valueDiv {
  padding: 10px;
  width: 40%;
  font-size: 14px;
  text-align: left;
  word-break: break-all;
}
video {
  width: 300px;
  height: 157px;
}

img {
  width: 160px;
  height: 160px;
  margin: 0 7px 10px 0;
  /* border: none; */
  object-fit: cover;
}

.tableDiv .rowDiv .valueDivFull {
  padding: 10px;
  /* width: 40%; */
  text-align: left;
  word-break: break-all;
}

.tableDiv .rowDiv .valueDiv img:hover {
  cursor: pointer;
}
</style>